<template>
  <div>
    <Top />
    <Header />

    <div class="container-warp">
      <div class="container">
        <div class="ivu-tabs-tab">
          <span
            v-for="(item, index) in tabBars"
            :key="item.index"
            @click="activeTabClass(index,$event)"
            :class="{ active_tab:index==tab_current}"
          >{{item.name}}</span>
        </div>
        <el-input
          placeholder="请输入内容"
          v-model="formDate.resName"
          class="input-with-select"
          clearable
          style="width:314px;height:30px;"
          size="small"
          @change="toQuery()"
        >
          <!-- <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="视频" value="1"></el-option>
            <el-option label="文件" value="2"></el-option>
          </el-select>-->
          <el-button slot="append" icon="el-icon-search" size="small" @click="toQuery">搜索</el-button>
        </el-input>
        <div class="tags">
          <div>
            <span class="hd hd1">{{rName}}类型：</span>
            <ul class="hd1-ul">
              <li
                v-for="(todo, index) in todos"
                @click="addClass(index,$event,todo.id)"
                :class="{ blue:index==type_current}"
                :key="todo.id"
              >{{ todo.name }}</li>
            </ul>
          </div>

          <div>
            <span class="hd hd2">所属科目：</span>
            <ul class="hd2-ul">
              <li
                v-for="(item, index) in filtSubs"
                @click="subClass(index,$event,item.id)"
                :class="{ blue:index==sub_current}"
                :key="item.id"
              >{{ item.couName }}</li>
              <div @click="loadMore" class="loadMore" v-if="this.subs.length > '10'">{{textMore}}</div>
            </ul>
          </div>

          <div>
            <span class="hd hd3">所属学段：</span>
            <ul class="h3-ul">
              <li
                v-for="(item, index) in pers"
                @click="perClass(index,$event,item.id)"
                @mouseenter="Menter(index,item.id)"
                :class="{ blue3:index==per_current}"
                :key="item.index"
                :style="{ 'baColor:index== currentColor':currentColor}"
              >{{ item.phName }}</li>
            </ul>
            <transition name="fade" mode="out-in">
              <div v-show="visibles" @mouseleave="Lever" class="calssAll">
                <span
                  v-for="(item,index) in classAll"
                  :key="index"
                  :class="{active : active == item.gradeName}"
                  @click="calssAll(index,item.id,item.gradeName)"
                >{{item.gradeName}}</span>
              </div>
            </transition>
          </div>
        </div>

        <div class="sorts">
          <span
            v-for="(item, index) in sots"
            @click="sortClass(index,item.id)"
            :class="{ sort_active:index==sort_current}"
            :key="item.index"
          >{{item.name}}</span>
        </div>

        <div class="con">
          <div class="ivu-mb" v-for="(item) in items" :key="item.id">
            <div class="ivu-card" @click="getId(item)">
              <!-- <a class="box" :href="href+'id='+item.id" target="_blank"> -->
              <a class="box">
                <div class="img-warp">
                  <el-image :src="item.resCover" class="elimg" lazy>
                    <div slot="error" class="image-slot">
                      <img :src="banner_src" lazy style="width:100%;height:180px;" />
                    </div>
                  </el-image>
                  <span class="play"></span>
                  <span class="play-active"></span>
                </div>
                <div class="ivu-p">
                  <div class="course-card-name">{{item.resName}}</div>
                  <div class="tools">
                    <span>
                      <img src="~static/see.png" />3980
                    </span>
                    <span>
                      <img src="~static/appreciate.png" />120
                    </span>
                    <span>
                      <img src="~static/discuss.png" />2549
                    </span>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="noData" v-show="this.items.length===0 ">暂无数据</div>
      </div>
    </div>
    <div class="paging">
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="formDate.pageNo"
          :page-count="pageCount"
          layout="prev, pager, next,total, jumper"
          :pager-count="pagerCount"
          :total="total"
          class="pagination"
        ></el-pagination>
      </el-col>
    </div>
    <New />
  </div>
</template>

<script>
import axios from "axios";
import Top from "~/components/Top.vue";
import Header from "~/components/Header.vue";
import New from "../new.vue";
export default {
  transition: "layout",
  components: {
    Top,
    Header,
    New,
  },
  data() {
    return {
      banner_src: require("../../static/timg-weep.jpg"),
      href: "/news?", //播放详情页面
      currentColor: "",
      visibles: false,
      rName: "视频",
      pageCount: 0,
      total: 0, //总数
      pagerCount: 5,
      title: "资源中心",
      items: [],
      formDate: {
        pageNo: 1,
        pageSize: 12,
        resType: "0", //0视频，1文件
        resName: "",
        useType: "", //0优课1微课2教育资源3其他视频4文档5图片6其他文件
        resCourses: "", //科目
        resPhases: "", //学段
        resGrade: "", //年级
        order: 0, //排序，0访问量排序1时间排序2点赞数排序
      },
      tab_current: 0,
      type_current: 0,
      sub_current: 0,
      per_current: 0,
      sort_current: 0,
      tabBars: [
        {
          name: "视频",
        },
        {
          name: "文件",
        },
      ],
      todos: [
        {
          name: "所有视频",
          id: "",
        },
        {
          id: 0,
          name: "优课",
        },
        {
          id: 1,
          name: "微课",
        },
        {
          id: 2,
          name: "教育资源",
        },
        {
          id: 3,
          name: "其他",
        },
      ],
      subs: [{ id: "", couName: "所有科目" }],
      pers: [{ id: "", phName: "所有学段" }],
      sots: [
        {
          id: 0,
          name: "访问量排序",
        },
        {
          id: 1,
          name: "时间排序",
        },
        {
          id: 2,
          name: "点赞量排序",
        },
      ],
      classAll: [],
      activeId: "",
      limitNum: 10,
      defaultShowNumber: 10,
      textMore: "更多>>",
      active: "",
    };
  },
  /*
  validate ({ params }) {
    // Must be a number   刷新页面即可看到校验效果‘This page could not be found’
    return /^\d+$/.test(params.id)
  },*/

  // async asyncData({route, error}) {
  //   if(process.client || process.title  === 'browser')
  //   return { sOotfitId: route.params.id }
  // },
  computed: {
    filtSubs() {
      return this.subs.slice(0, this.limitNum);
    },
  },
  mounted() {
    if (!this.ssr) {
      this.ready();
      this.init();
    }
  },
  head() {
    return {
      title: this.title,
      meta: [{ hid: "description", name: "description", content: "" }],
    };
  },
  methods: {
    ready() {
      axios.post("/web/tAreaResource/initialization").then((res) => {
        if (res.data.code == 2000) {
          const firpers = { id: "", phName: "所有学段" };
          const firsubs = { id: "", couName: "所有科目" };
          this.subs = res.data.data.tCourseinfoList;
          this.pers = res.data.data.tPhaseinfoList;
          this.subs.unshift(firsubs);
          this.pers.unshift(firpers);
        } else {
          this.$message.error("服务器错误");
        }
      });
    },
    init() {
      let params = this.formDate;
      axios.post("/web/tAreaResource/indexresource", params).then((res) => {
        if (res.data.code == 2000) {
          this.total = res.data.data.page.total;
          this.items = res.data.data.page.list;
        } else {
          this.$message.error("服务器错误");
        }
      });
    },
    loadMore() {
      if (this.limitNum != this.subs.length) {
        this.limitNum = this.subs.length;
        this.textMore = "<<收起";
      } else {
        this.limitNum = this.defaultShowNumber;
        this.textMore = "更多>>";
      }
    },
    handleCurrentChange(val) {
      this.formDate.pageNo = val;
      this.init();
    },
    handleSizeChange(val) {
      this.formDate.pageSize = val;
      this.init();
    },

    // tab切换
    activeTabClass(index, event) {
      this.formDate.useType = "";
      this.type_current = "";
      this.tab_current = index;
      if (index == 1) {
        this.rName = "文件";
        this.todos = [
          {
            name: "所有文件",
            id: "",
          },
          {
            id: 4,
            name: "文档",
          },
          {
            id: 5,
            name: "图片",
          },
          {
            id: 6,
            name: "其他",
          },
        ];
      } else {
        this.rName = "视频";
        this.todos = [
          {
            name: "所有视频",
            id: "",
          },
          {
            id: 0,
            name: "优课",
          },
          {
            id: 1,
            name: "微课",
          },
          {
            id: 2,
            name: "教育资源",
          },
          {
            id: 3,
            name: "其他",
          },
        ];
      }
      this.formDate.resType = index;
      this.init();
    },
    // 类型切换
    addClass(index, event, id) {
      this.type_current = index;
      this.formDate.useType = id;
      this.init();
    },
    // 科目切换
    subClass(index, event, id) {
      this.sub_current = index;
      this.formDate.resCourses = id;
      this.init();
    },
    // 学段切换
    perClass(index, event, id) {
      if (id == "") {
        this.per_current = index;
        var el = event.currentTarget;
        this.visibles = false;
        this.formDate.resPhases = id;
        this.formDate.resGrade = "";
        this.init();
      }
    },
    // 排序
    sortClass(index, id) {
      this.sort_current = index;
      this.formDate.order = id;
      this.init();
    },
    getId(item) {
      let objs = Object.assign({}, item);
      let resType = objs.resType;
      // if(resType == 0){
      this.$router.push({
        path: "/detail",
        query: {
          id: objs.id,
          resUrl: objs.resUrl,
          resName: objs.resName,
          resType: objs.resType,
          useType: objs.useType,
          resCover: objs.resCover,
        },
      }); //不打开新页面
      // }
    },
    Menter(index, id) {
      this.currentColor = index;
      let url = "/web/tGradeinfo/get/" + id;
      if (id != "") {
        axios.get(url).then((res) => {
          if (res.data.code == 2000) {
            this.visibles = true; //显示年级
            this.activeId = id;
            this.classAll = res.data.data;
          } else {
            this.$message.error("服务器错误");
          }
        });
      } else {
        this.visibles = false; //隐藏年级
      }
    },
    Lever() {
      this.visibles = false;
      // this.per_current= ''
    },
    // 年级查询
    calssAll(index, id, name) {
      // console.log(this.activeId)
      this.formDate.resGrade = id;
      this.per_current = this.activeId;
      this.active = name;
      this.init();
    },
    toQuery() {
      this.init();
    },
  },
};
</script>
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.active {
  color: #0290fc !important;
  // border:1px solid #0290fc;
  padding: 0 10px;
}
.active_tab {
  color: #fff !important;
  border: 1px solid #0290fc;
  border-radius: 50px;
  background: #176ae5;
}
.blue {
  color: #0290fc !important;
  // border: 1px solid #0290fc;
}
.blue3 {
  color: #0290fc !important;
  background: #f7fdff;
}
.baColor {
  background: #ccc;
}
.sort_active {
  color: #0290fc;
  border: 1px solid #0290fc;
}
.container-warp {
  background: #fff;
  padding-top: 46px;
  background-image: url("~static/bg_01.jpg");
  background-size: 100% 100%;
  .container {
    @include max-content;
    background: #fff;
    padding: 40px 38px;
    .ivu-tabs-tab {
      margin: 0 0 30px 0;
      border-bottom: 1px solid #e7e9ec;
      padding-bottom: 35px;
      span {
        padding: 5px 20px;
        color: #000;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        &:hover {
          color: #0290fc;
          /* border:1px solid #0290fc;
          border-radius: 50px;
          background: #176ae5; */
        }
      }
    }
    .tags {
      font-size: 15px;
      @include float-after;
      .hd {
        @include float-li;
        color: #4c4c4c;
        line-height: 30px;
      }
      .hd1-ul {
        li {
          cursor: pointer;
        }
      }
      .hd2-ul {
        margin-right: 100px;
        position: relative;
        li {
          cursor: pointer;
        }
        .loadMore {
          position: absolute;
          right: -100px;
          top: 4px;
          cursor: pointer;
          background: #0290fc;
          color: #fff;
          border-radius: 50px;
          padding: 6px 12px;
        }
      }
      .h3-ul {
        li {
          &:first-child {
            cursor: pointer;
          }
          &:hover {
            color: #0290fc;
            background: #f7fdff;
          }
        }
      }
      ul {
        margin-top: 26px;
        margin-left: 96px;
        @include float-after;
        li {
          @include float-li;
          color: #949494;
          margin-right: 20px;
          padding: 0 10px;
          font-size: 15px;
          height: 30px;
          line-height: 30px;
          &:hover {
            color: #0290fc;
          }
        }
      }
      .calssAll {
        width: 716px;
        margin: 0 auto;
        background: #f7fdff;
        height: 50px;
        line-height: 50px;
        span {
          margin: 0 20px;
          padding: 0 10px;
          font-size: 14px;
          color: #949494;
          cursor: pointer;
          &:hover {
            color: #0290fc;
            // border: 1px solid #0290fc;
          }
        }
      }
    }
    .sorts {
      margin: 40px 0;
      height: 38px;
      line-height: 38px;
      background: #f7f7f7;
      color: #4c4c4c;
      span {
        margin-right: 24px;
        cursor: pointer;
        font-size: 15px;
        padding: 5px 24px;
      }
    }
  }

  .con {
    margin: 0 -14px;
    zoom: 1;
    &:after {
      display: block;
      clear: both;
      content: "";
    }
    .ivu-mb {
      width: 25%;
      padding: 10px 14px;
      float: left;
      .ivu-card {
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 11px 43px -12px rgba(71, 71, 71, 0.36);
        cursor: pointer;
        &:hover {
          // border-top: 5px solid #0290fc;
          box-shadow: 0 11px 43px -15px rgba(71, 71, 71, 0.36);
        }
        position: relative;
        .box {
          display: inline-block;
          text-align: center;
          &:hover .img-warp .play-active {
            display: block;
          }
          .img-warp {
            position: relative;
            .elimg {
              width: 100%;
              height: 180px;
              cursor: pointer;
              border-radius: 4px 4px 0 0;
            }
            .play {
              position: absolute;
              z-index: 120;
              width: 50px;
              height: 50px;
              left: 50%;
              margin-left: -25px;
              top: 50%;
              margin-top: -25px;
              background: url("~static/play.png") 0 0 no-repeat;
              cursor: pointer;
              background-size: 50px 50px;
            }
            .play-active {
              display: none;
              position: absolute;
              z-index: 120;
              width: 50px;
              height: 50px;
              left: 50%;
              margin-left: -25px;
              top: 50%;
              margin-top: -25px;
              background: url("~static/play_active.png") 0 0 no-repeat;
              cursor: pointer;
              background-size: 50px 50px;
            }
          }
          .ivu-p {
            padding: 20px !important;
            .course-card-name {
              font-size: 13px;
              color: #515151;
              line-height: 22px;
              word-wrap: break-word;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              transition: all 0.3s;
              font-weight: bold;
              height: 20px;
            }
            .tools {
              margin-top: 16px;
              color: #b2b2b2;
              font-size: 14px;
              text-align: right;
              span img {
                margin: 0 5px 0 18px;
              }
            }
          }
        }
      }
    }
  }
  .noData {
    text-align: center;
    font-size: 13px;
    color: #a09d9d;
    margin: 160px 0;
  }
}
.paging {
  max-width: 1200px;
  margin: -10px auto 0 auto;
  height: 96px;
  text-align: center;
}

@media (min-width: 300px) and (max-width: 650px) {
  .con .ivu-mb {
    width: 100% !important;
  }
  .container-warp {
    overflow: hidden;
    .container {
      .tags {
        display: none;
      }
      .sorts {
        span {
          margin: 0;
          padding: 4px 8px;
        }
      }
    }
  }
}

@media (min-width: 650px) and (max-width: 1199px) {
  .con .ivu-mb {
    width: 50% !important;
  }
  .container-warp {
    overflow: hidden;
    .container {
      // .tags{display: none}
      .sorts {
        span {
          margin: 0;
          padding: 4px 8px;
        }
      }
    }
  }
}
@media (min-width: 1200px) and (max-width: 1920px) {
  .con .ivu-mb {
    width: 25%;
  }
  .container-warp .container .tags {
    display: block;
  }
}
</style>